<template>
	<view class="pagesBox">
		<view class="pagesTop">
			<!-- <view class="searchBox">
				<u-search placeholder="商品名称/订单编号" shape="round" bg-color="#162E46" border-color="#A09583" search-icon-color="#FDD088" placeholder-color="#A1A5AA" :clearabled="false" :show-action="false" :disabled="true"></u-search>
			</view> -->
			<u-tabs @change="change" :list="list" :is-scroll="false" :current="current" font-size="26" bg-color="#f7f8fa" active-color="#2BA777" inactive-color="#A1A5AA"></u-tabs>
		</view>
		<view class="pagesMain">
			<block v-for="(item,index) in orderList" :key="index">
				<view class="orderItem" @click="toDetail(item)">
					<view class="orderTop">
						<view class="shopInfo">
							<!-- <view class="imageBox"><image src="/static/logo.png" style="width: 40rpx;height: 40rpx;border-radius: 50%;"></image></view> -->
							<view class="shopName">{{item.store_name || ''}}</view>
						</view>
						<view class="orderStatus" :class="[(item.status == 2 || item.status == 3) ? 'color2':'color1']">{{item.status_text}}</view>
					</view>
					<u-divider half-width="100%" border-color="#ccc" :use-slot="false"></u-divider>
					<view class="goodsBox">
						<block v-for="(item1,index1) in item.goods" :key="index1">
							<view class="goodsItem">
								<view class="goodsImage">
									<image :src="item1.goods_image" style="width: 176rpx;height: 176rpx;border-radius: 16rpx;"></image>
								</view>
								<view class="goodsDetail">
									<view class="infoName u-line-2">{{item1.goods_name}}</view>
									<view class="infoBottom">
										<view class="buyNum">{{item1.goods_spec}} x {{item1.goods_num}}</view>
										<view class="goodsMoney"><text style="font-size: 32rpx;">￥{{item1.goods_money}}</text></view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<view class="orderBottom">
						<!-- <view class="moreBox">更多</view> -->
						<view class="moreBox">合计：<text style="font-size: 32rpx;">￥{{item.money}}</text></view>
						<view class="btnBox" v-if="item.status != 5">
							<view class="btn" hover-class="hoverBtn" v-if="item.status == 0" @click.stop="orderCancel(item,index)">取消订单</view>
							<view class="btn" hover-class="hoverBtn" v-if="item.status == 0" @click.stop="toPayBefore(item,index)">立即支付</view>
							<!-- <view class="btn" hover-class="hoverBtn" v-if="item.status == 1" @click.stop="orderRefund(item,index)">退款</view> -->
							<view class="btn" hover-class="hoverBtn" v-if="item.status == 2" @click.stop="afterSales(item)">申请售后</view>
							<view class="btn" hover-class="hoverBtn" v-if="item.status == 2" @click.stop="toLogistics(item)">查看物流</view>
							<view class="btn" hover-class="hoverBtn" v-if="item.status == 2" @click.stop="orderReceive(item,index)">确认收货</view>
							<!-- <view class="btn" hover-class="hoverBtn" v-if="item.status == 4 && item.refund_apply == 1" @click.stop="afterCancel(item,index)">取消售后</view> -->
						</view>
					</view>
				</view>
			</block>
			<uni-load-more :status="statusType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{name: '全部'},
					{name: '待付款'},
					{name: '待发货'}, 
					{name: '待收货'}, 
					{name: '已完成'}, 
					{name: '售后'}
				],
				current: -1,
				orderList:[],
				params:{
					status:"",
					limit:6,
					page:1,
					keysword:""
				},
				time:''
			};
		},
		onLoad(options) {
			if(options.status == "null"){
				this.current = 0;
			}else if(options.status){
				this.current = options.status * 1 + 1;
				this.params.status = options.status;
			}else{
				this.current = 0;
			}
		},
		onShow() {
			this.params.page = 1;
			this.getOrderList()
		},
		methods:{
			async getOrderList(){
				let res = await uni.$http('POST','order/list',this.params);
				if(res.code == 1){
					this.params.page = res.data.current_page;
					this.total = res.data.total;
					if(this.params.page == 1){
						this.orderList = res.data.data;
					}else{
						this.orderList = this.orderList.concat(res.data.data);
					}
					if(this.orderList.length < this.total){
						this.statusType = 'more'
					}else{
						this.statusType = 'noMore'
					}
				}else if(res.msg.includes('登录')){
					this.total = 0;
					uni.removeStorageSync("token")
				}else{
					this.total = 0;
				}
			},
			// 订单取消
			async orderCancel(item,index){
				let res = await uni.$http('POST','order/orderCancel',{id:item.id});
				uni.$u.toast(res.msg)
				if(res.code == 1){
					// 在同一状态下不刷新接口实现状态变化或者数据更新
					if(this.params.status){
						this.orderList.splice(index,1);
						if(this.orderList.length == 0){
							this.total = 0;
						}
					}else{
						let obj = item;
						obj.status = 5;
						obj.status_text = "取消";
						this.orderList.splice(index,1,obj);
					}
					// this.params.page = 1;
					// this.getOrderList()
				}
			},
			// 立即支付
			toPayBefore(item){
				if(this.time){
					clearTimeout(this.time)
					this.time = '';
				}
				uni.showLoading({
					title:"加载中",
						mask:true
				})
				this.time = setTimeout(()=>{
					this.submit(item)
				},700)
			},
			async submit(item){
				let res = await uni.$http('POST','order/orderPay',{id:item.id});
				uni.hideLoading()
				if(res.code == 1){
					if(!res.data.timeStamp){
						let ress = await uni.$http('POST','order/isPay',{id:res.data.orders_id});
						if(ress.code == 1){
							uni.$u.toast('支付成功')
							this.current = 2;
							this.params.status = 1;
							this.params.page = 1;
							this.getOrderList()
						}else if(ress.code == 2){
							uni.$u.toast('支付失败')
						}
					}else{
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: async res1 => {
								let ress = await uni.$http('POST','order/isPay',{id:res.data.orders_id});
								if(ress.code == 1){
									uni.$u.toast('支付成功')
									this.current = 2;
									this.params.status = 1;
									this.params.page = 1;
									this.getOrderList()
								}else if(ress.code == 2){
									uni.$u.toast('支付失败')
								}
							},
							fail() {
								uni.$u.toast('支付失败')
							}
						})
					}
				}else{
					uni.$u.toast(res.msg)
				}
			},
			// 未发货退单
			async orderRefund(item,index){
				let res = await uni.$http('POST','order/refund',{id:item.id});
				uni.$u.toast(res.msg)
				if(res.code == 1){
					if(this.params.status){
						this.orderList.splice(index,1);
						if(this.orderList.length == 0){
							this.total = 0;
						}
					}else{
						let obj = item;
						obj.status = 5;
						obj.status_text = "取消";
						this.orderList.splice(index,1,obj);
					}
					// this.params.page = 1;
					// this.getOrderList()
				}
			},
			// 确认收货
			async orderReceive(item,index){
				uni.showModal({
					title: '提示',
					content: '确认收货后订单完成不可售后，是否确认',
					cancelText:"否",
					success: async (res)=> {
						if (res.confirm) {
							let res = await uni.$http('POST','order/orderReceive',{id:item.id});
							uni.$u.toast(res.msg)
							if(res.code == 1){
								if(this.params.status){
									this.current = 4;
									this.params.status = 3;
									this.params.page = 1;
									this.getOrderList()
								}else{
									let obj = item;
									obj.status = 3;
									obj.status_text = "已完成";
									this.orderList.splice(index,1,obj);
								}
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			async afterCancel(item,index){
				let res = await uni.$http('POST','order/afterCancel',{id:item.id});
				uni.$u.toast(res.msg)
				if(res.code == 1){
					if(this.params.status){
						this.orderList.splice(index,1);
						if(this.orderList.length == 0){
							this.total = 0;
						}
					}else{
						let obj = item;
						obj.status = 3;
						obj.status_text = "已完成";
						this.orderList.splice(index,1,obj);
					}
					this.params.page = 1;
					this.getOrderList()
				}
			},
			sumTotal(num1,num2,num3,num4){
				return parseFloat(num1*1 + num2*1 + num3*1 + num4*1).toFixed(2)
			},
			afterSales(item){
				uni.navigateTo({
					url:"/pagesMy/order/afterSales?id="+item.id+'&status='+item.status
				})
			},
			change(index) {
				console.log(index);
				this.current = index;
				this.params.status = ["",0,1,2,3,4][index];
				this.params.page = 1;
				this.getOrderList()
			},
			toDetail(item){
				uni.navigateTo({
					url:"/pagesMy/order/detail?id="+item.id
				})
			},
			toLogistics(item){
				uni.navigateTo({
					url:"/pagesMy/order/logistics?id="+item.id
				})
			}
		},
		onReachBottom() {
			if(this.orderList.length < this.total){
				this.statusType = 'loading';
				this.params.page++;
				this.getOrderList()
			}else{
				this.statusType = 'noMore'
			}
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	padding: 12rpx 24rpx;
	padding-top: 0%;
	.pagesTop{
		background-color: #151E2C;
		position: sticky;
		top: 0%;
		right: 0%;
		left: 0%;
		z-index: 999;
		.searchBox{
			padding: 0% 24rpx;
		}
	}
	.pagesMain{
		padding: 12rpx 0rpx;
		.orderItem{
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			.orderTop{
				padding: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.shopInfo{
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
					display: flex;
					align-items: center;
					.imageBox{
						font-size: 0%;
						margin-right: 8rpx;
					}
				}
				.orderStatus{
					font-weight: 600;
					font-size: 28rpx;
				}
				.color1{
					color: #FF6938;
				}
				.color2{
					color: #53C588;
				}
			}
			.goodsBox{
				padding: 16rpx 16rpx 0 16rpx;
				.goodsItem{
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
					.goodsImage{
						width: 176rpx;
						font-size: 0%;
						margin-right: 16rpx;
					}
					.goodsDetail{
						flex: 1;
						height: 176rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.infoName{
							font-weight: 400;
							font-size: 28rpx;
							color: #000;
						}
						.infoBottom{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.goodsMoney{
								font-weight: 400;
								font-size: 28rpx;
								color: #2BA777;
							}
							.buyNum{
								font-weight: 400;
								font-size: 24rpx;
								color: #A1A5AA;
							}
						}
					}
				}
			}
			.orderBottom{
				padding: 0 16rpx 16rpx 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.moreBox{
					font-weight: 400;
					font-size: 24rpx;
					color: #000;
				}
				.btnBox{
					display: flex;
					align-items: center;
					.btn{
						width: 144rpx;
						height: 48rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #fff;
						background: #2BA777;
						border-radius: 40rpx;
						border: 2rpx solid #2BA777;
						margin-left: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.hoverBtn{
						background: #37d898;
					}
				}
			}
		}
	}
}
</style>
<style>
	page{
		background-color: #f7f8fa;
	}
</style>